
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		 [v-cloak]{
          display: none;
        }
	</style>
</head>
<body>
	<div id="app">
		<alert-box>有bug发生！</alert-box>
		<alert-box>有一个警告！</alert-box>
		<alert-box></alert-box>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
    <script>Vue.config.productionTip = false</script>
	<script type="text/javascript">
		/*
			组件插槽
				插槽的内容是从组件标签的中间传递过来的！ 
				如果模板中的插槽中有内容，组件标签中没有内容，那么插槽中的内容就会填充到组件标签中，如果组件标签中有内容则会覆盖插槽中的内容！
		*/
		Vue.component('alert-box', {
			template: `
				<div>
					<strong>ERROR:</strong>
					<slot>默认的内容</slot>
				</div>
			`
		})
		var vm = new Vue({
			el: '#app',
			data: {
			
			}
			
		})
	</script>
</body>
</html>